<template>
	<view style="padding: 20rpx;">
		<view class="box">
			<uni-forms :modelValue="form" :rules="rules" ref="formRef" label-width="140rpx" label-align="right">
				<!-- 头像上传 -->
				<uni-forms-item label="头像" name="avatar">
					<uni-file-picker limit="1" :image-styles="imageStyles" :del-icon="false" :disable-preview="true"
						fileMediatype="image" v-model="avatar" @select="handleAvatarUploadSuccess"></uni-file-picker>
				</uni-forms-item>

				<!-- 账号显示，不能修改 -->
				<uni-forms-item label="账号" name="account">
					<uni-easyinput type="text" v-model="form.account" disabled />
				</uni-forms-item>

				<!-- 昵称 -->
				<uni-forms-item label="昵称" name="username">
					<uni-easyinput type="text" v-model="form.username" placeholder="请输入昵称" />
				</uni-forms-item>

				<!-- 姓名 -->
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />
				</uni-forms-item>

				<!-- 电话 -->
				<uni-forms-item label="电话" name="phone_number">
					<uni-easyinput type="text" v-model="form.phone_number" placeholder="请输入电话" />
				</uni-forms-item>

				<!-- 城市 -->
				<uni-forms-item label="城市" name="city">
					<uni-easyinput type="text" v-model="form.city" placeholder="请输入城市" />
				</uni-forms-item>

				<!-- 性别选择 -->
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox style="position: relative; top: 10rpx;" v-model="form.sex" :localdata="range"></uni-data-checkbox>
				</uni-forms-item>

				<!-- 学历背景 -->
				<uni-forms-item label="学历背景" name="background">
					<uni-easyinput type="text" v-model="form.background" placeholder="请输入学历背景" />
				</uni-forms-item>

				<!-- 专业 -->
				<uni-forms-item label="专业" name="speciality">
					<uni-easyinput type="text" v-model="form.speciality" placeholder="请输入专业" />
				</uni-forms-item>

				<!-- 年龄 -->
				<uni-forms-item label="年龄" name="age">
					<uni-easyinput type="number" v-model="form.age" placeholder="请输入年龄" />
				</uni-forms-item>

				<!-- 个人介绍 -->
				<uni-forms-item label="个人介绍" name="introduction">
					<textarea v-model="form.introduction" placeholder="请输入个人介绍" 
						style=" width: 253px;,height: 80rpx; border: 1px solid #ededed; border-radius: 5px; padding: 10rpx; margin-right: 20px ;">
					</textarea>
				</uni-forms-item>
		

				<!-- 保存按钮 -->
				<uni-forms-item>
					<button type="primary" size="mini" @click="save">保 存</button>
				</uni-forms-item>
			</uni-forms>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: [],
				form: {},
				user: uni.getStorageSync('xm-user'),
				imageStyles: {
					"height": 80,
					"width": 80,
					"border": {
						"color": "#eee",
						"width": "1px",
						"style": "solid",
						"radius": "50%"
					}
				},
				range: [
					{ text: '男', value: '男' },
					{ text: '女', value: '女' }
				]
			}
		},
		onLoad() {
			this.form = JSON.parse(JSON.stringify(this.user))
			this.avatar = [{
				url: this.user.avatar
			}]
		},
		methods: {
			save() {
				this.$request.post('/teacher/update', this.form).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: "success",
							title: '操作成功'
						})
					uni.setStorageSync('xm-user', this.form)
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			handleAvatarUploadSuccess(e) {
				let _this = this
				const filePath = e.tempFilePaths[0]
				uni.uploadFile({
					url: _this.$baseUrl + '/upload',
					filePath: filePath,
					name: "file",
					success(res) {
						let url = JSON.parse(res.data || '{}').data
						_this.form.avatar = url
					}
				})
			}
		}
	}
</script>


<style>
/* 添加必要的样式 */
</style>
